/* eslint  react/no-string-refs: 0 */
import React, { Component } from 'react';
import IceContainer from '@icedesign/container';
import { Input, Button, Radio, Switch, Upload, Grid } from '@alifd/next';
import {
  FormBinderWrapper as IceFormBinderWrapper,
  FormBinder as IceFormBinder,
  FormError as IceFormError,
} from '@icedesign/form-binder';
import { Tab } from '@alifd/next';
const { Row, Col } = Grid;
const { Group: RadioGroup } = Radio;

const panes = [
  {
    tab: 'Todo Tasks',
    key: 0
  },
  {
    tab: 'Finished Tasks',
    key: 1
  },
  {
    tab: 'Unread Messages',
    key: 2
  },
  {
    tab: 'Past Messages',
    key: 3
  },
  {
    tab: 'All Messages',
    key: 4
  }
];


class App extends React.Component {
  constructor(...props) {
    super(...props)
    this.state = {text: "please input"} // todo 初始化打印的文字
    console.log(this .props)
  }

  handleChange(event) { // todo event
    this.setState({
      text: event.target.value  //
    })
  }

  // todo 刚上来加载默认值 使用defaultValue,还有defaultChecked
  render() {
    return (
      <div>
      <input type="checkbox" defaultChecked={this.props.ischeck}/>是否接受邮件<br/>
    username: <input type="text" onChange={this.handleChange.bind(this)}  defaultValue={this.state.text}/><br/>
    clone username: <label>{this.state.text}</label>
    </div>
  )
  }
}


const detachedContentStyle = {
  border: '1px solid #DCDEE3',
  padding: '20px',
};

export default class BaseSetting extends Component {
  static displayName = 'BaseSetting';

  static propTypes = {};

  static defaultProps = {};



  render() {
    return (
      <div className="fusion-demo">


      <div className="demo-item-title">Setting className and style in Tab.Item</div>
    <Tab shape="wrapped" navStyle={{ background: '#DEE8FF' }}>
    {
      panes.map(pane => {
        return (<Tab.Item
        title={pane.tab}
        key={pane.key}
        className="custom-tab-item"
        style={{background: '#FFF'}}><App/></Tab.Item>
      );
      })
    }
  </Tab>

    <div className="demo-item-title">Tabs with equal width</div>
    <Tab shape="capsule">
      {
        panes.map(pane => <Tab.Item title={pane.tab} key={pane.key} className="justify-tabs-tab">{pane.tab}</Tab.Item>)
      }
      </Tab>
      </div>
  )
  }
}

const styles = {
  label: {
    textAlign: 'right',
  },
  formContent: {
    width: '100%',
    position: 'relative',
  },
  formItem: {
    alignItems: 'center',
    marginBottom: 25,
  },
  formTitle: {
    margin: '0 0 20px',
    paddingBottom: '10px',
    borderBottom: '1px solid #eee',
    color: '#333',
  },
  inputItem: {
    width: '100%',
  },
};
